<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title>修改密码</title>
		<link rel="stylesheet" type="text/css" th:href="@{/layui/dist/css/layui.css}" />
		<link rel="icon" type="image/png" href="icon/I.png">
	</head>
	<style>
		table tr th{
			text-align: center !important;
			font-weight: bold !important;
		}
	</style>
	<body style="background: rgb(241, 241, 241) !important;">
	<br>
		<div class="box1" style="width:40%; margin: 0 auto">
			<!-- 下拉框第1点 -->
			<form class="layui-form">
				<table class="layui-table">
					<tr>
						<td align="right">新密码：</td>
						<td>
							<input type="password" class="layui-input" id="passw" onblur="yanzhengpass()"/>
							<span id="tip1"></span>
						</td>
					</tr>
					<tr>
						<td align="right">确认密码：</td>
						<td>
							<input type="password" class="layui-input" onblur="yanzhengrepassw()" id="repassw"/>
							<span id="tip2"></span>
						</td>
					</tr>
					<tr>
						<td colspan="2" align="center">
							<button type="button" class="layui-btn layui-btn-normal " onclick="upPass()">确认修改</button>
						</td>
					</tr>
				</table>
			</form>
		</div>
	</body>
	<script th:src="@{/layui/src/layui.js}" type="text/javascript" charset="utf-8"></script>
	<script th:src="@{/js/jquery.min.js}" type="text/javascript"></script>
	<!-- 下拉框第3点 -->
	<script>
		layui.use('form', function() {
			var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功

			//……

			//但是，如果你的HTML是动态生成的，自动渲染就会失效
			//因此你需要在相应的地方，执行下述方法来手动渲染，跟这类似的还有 element.init();
			form.render();
		});
	</script>
<script>
	function yanzhengpass() {
		let passw = $("#passw").val().trim();
		let reg=/^[0-9]{1,20}$/;
		//判断密码位数6——12
		if (passw.length<6|passw.length>12){
			$("#tip1").text("× 请输入6到12位数密码").css("color","red")
			return false
		}
		//判断密码是否为纯数字
		if (reg.test(passw)){
			$("#tip1").text("√  强度等级:弱").css("color","#f47920")
			return true;
		}
		//判断密码
		reg=/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){5,11}$/;
		if (reg.test(passw)){
			$("#tip1").text("√  强度等级:强").css("color","green")
			return true;
		}
	}
	function  yanzhengrepassw() {
		let repassw = $("#repassw").val().trim();
		let passw = $("#passw").val().trim();
		if (repassw==passw){
			$("#tip2").text("√ 一致").css("color","green")
			return true
		}else {
			$("#tip2").text("× 两次输入密码不一致").css("color","red")
			return  false
		}
	}
	var id=0;
	function upPass() {

		if (yanzhengpass()&&yanzhengrepassw()){
			let tip1 = $("#tip1").text();
			if (tip1=='√  强度等级:弱'){
				if (!confirm("密码强度较弱，是否确认修改？")){
					return;
				}
			}
			let pass = $("#passw").val().trim();

			$.ajaxSettings.async=false;
			ajaxForm("view/getUserOfLogin", "get", function (dataA) {
				 id = dataA.data.id
				console.log(id)
			})
			$.ajaxSettings.async=true;
			var jsonA={
				id:id,
				password:pass
			}
			console.log(jsonA)
			$.ajaxSettings.async=false;
			$.get("/upPass",jsonA,function (dataA) {
				if (dataA==true){
					layer.alert("修改成功，请重新登录！")
					localStorage.removeItem("token")
					setTimeout("tuichu()","1000")
				}else {
					layer.msg("修改失败，请稍后重试！")
				}
			})
			$.ajaxSettings.async=true;
		}else {
			layer.msg("请正确填写两次密码")
			return
		}

	}
	function tuichu() {
		window.top.location = "/login";
	}
	//ajax请求-无参
	function ajaxForm(url, type, success) {
		$.ajax({
			url: url,
			type: type,
			dataType: "json",
			headers: {
				"token": localStorage.token
			},
			success: success,
			error: function (xhr) {
				alert("登录超时！");
				location.href = "/login";
			}
		});
	}

	//ajax请求-带参
	function ajaxFormWithArgs(url, type, args, success) {
		$.ajax({
			url: url,
			type: type,
			data: args,
			dataType: "json",
			headers: {
				"token": localStorage.token
			},
			success: success,
			error: function (xhr) {
				alert("请求出错：" + xhr.status);
			}
		});
	}
</script>
</html>
